$(function () {
    // TODO:创建裁剪区域
    var $image = $("#image")
    var options = {
        // 纵横比
        aspectRatio: 1,
        // 指定预览区域
        preview: '.img-preview'
    };
    $image.cropper(options)

    // TODO:点击按钮选择图片
    $("#chooseImg").on("click", function () {
        $("#file").click()
    })

    // TODO:文件域发生改变将大图改变
    $("#file").on("change", function () {
        // console.dir(this)
        // var file = $(this).files
        // console.log(this.files[0])
        // 得到选择的图片对象
        var fileObj = this.files[0]
        // 生成临时的Url,这个url可以用于访问我们选择的图片
        var url = URL.createObjectURL(fileObj)
        // console.log(url)
        $image.cropper("destroy").attr("src", url).cropper(options)
    })


    // TODO:裁剪后的图片显示在页面中
    $("#uploadPic").on("click", function () {
        // 创建一个 Canvas 画布
        var canvas = $image.cropper('getCroppedCanvas', {
            width: 100,
            height: 100
        });

        var base64Pic = canvas.toDataURL()
        // console.log(base64Pic)
        $.post("/my/update/avatar", { avatar: base64Pic }, function (res) {
            console.log(res)
            if (res.status != 0) {
                return layer.mag(res.message)
            }
            layer.msg(res.message);
            window.parent.getUserInfo()
        })


    })























})